<template>
	<view class="page-background">
		<uni-nav-bar :border="false" statusBar fixed="true" title="案列详情" @clickLeft="clickBack">
			<!-- <template>标题栏</template> -->
			<template v-slot:left>
				<uni-icons type="back" size="26" />
			</template>
			<template v-slot:right>
				<text @click="clickEdit" v-if="isShowEdit" style="font-size: 34rpx;">编辑</text>
			</template>
		</uni-nav-bar>
		<view v-if="detail">
			<view class="fault-box">
				<view class="fault-box-head">
					<view class="btn-favlike" @click="favOnClick">
						<!-- <uni-icons type="star-filled" size=30></uni-icons> -->
						<fav-like v-bind:config="favconfig" :active="isFav"></fav-like>
					</view>
					<view class="btn-favlike" @click="likeOnClick">
						<!-- <uni-icons type="hand-up-filled" size=30></uni-icons> -->
						<fav-like v-bind:config="likeconfig" :active="isLike"></fav-like>
					</view>
					<!-- <uni-fav :checked="isFav" circle="true" @click="favOnClick" /> -->
				</view>
				<uni-section style="background-color: transparent;" title="故障描述" note type="line">
					<view class="test-align"> {{detail.fault_description}}</view>
				</uni-section>
				<uni-section title="故障代码" note type="line">
					<view class="test-align">{{detail.fault_code}}</view>
				</uni-section>
				<uni-section title="设备型号" note type="line">
					<text class="test-align">
						<text>{{detail.brand}}</text>
						<text>{{'\u3000'}}</text>
						<text>{{detail.model}}</text></text>
					<!-- <view class="test-align">{{detail.brand +'\u3000'+ detail.model}}</view> -->
				</uni-section>
				<uni-section title="详细信息" note type="line">
					<view class="test-align">{{detail.fault_information}}</view>
				</uni-section>
				<uni-section style="background-color: transparent;margin-bottom: 8px;" title="故障照片" note type="line">
					<view class="test-align">
						<uni-file-picker file-mediatype="image" file-extname="jpg,png" return-type="object"
							:value="detail.fault_photo" readonly :image-styles="imagestyles"></uni-file-picker>
					</view>
				</uni-section>
				<view class="item-datatime">
					<text>贡献者：</text>
					<text v-if="detail.user_id[0]">{{detail.user_id[0].nickname}}</text>
				</view>
				<view class="item-datatime">
					<text>发布时间：</text>
					<uni-dateformat format="yyyy/MM/dd hh:mm" :date="detail.create_time" />
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import { throttle, debounce } from "../../tool/toolfun.js"
	// import { getFavoriteStatus } from "../../uniCloud-aliyun/cloudfunctions/star-service/index.obj.js"

	// 由schema2code生成，包含校验规则和enum静态数据
	// 关闭系统自带的加载动画
	const SampleFavorite = uniCloud.importObject("star-service", {
		customUI: true // 取消自动展示的交互提示界面
	})


	export default {
		data() {

			let detail = {
				"_id": "",
				"fault_description": "",
				"fault_code": "",
				"brand": "",
				"model": "",
				"fault_information": "",
				"fault_photo": [],
				"private": false,
				"is_delete": false,
				"is_lock": false,
				"sort": null,
				"user_id": "",
				"create_time": 0,
			}
			let favconfig = {
				type: "star-filled",
				defaultColor: "#808080",
				activeColor: "#007aff",
				size: 35
			}
			let likeconfig = {
				type: "hand-up-filled",
				defaultColor: "#808080",
				activeColor: "#ffc109",
				size: 35
			}
			return {
				id: "", //登录者ID
				isShowEdit: false, //是否显示编辑按钮
				detail, //数据
				isFav: false, //收藏状态
				isLike: false, //点赞状态
				favconfig, //收藏按钮的属性
				likeconfig, //点赞按钮属性
				timeout: null, //防抖用定时器

				imagestyles: {
					border: { // 如果为 Boolean 值，可以控制边框显示与否
						radius: "10%", // 边框圆角，支持百分比
					}
				}
			}
		},
		// computed: {

		// },

		async onLoad() {
			//接收其他页面穿过来数据
			const data = JSON.parse(uni.getStorageSync('sampleItem'))
			this.detail = data
			// console.log(data)
			if (this.detail.user_id.length === 0) {

			} else {
				if (this.detail.user_id[0]._id === uniCloud.getCurrentUserInfo().uid) {
					this.isShowEdit = true
				} else {
					this.isShowEdit = false
				}
			}

			const favAndLikeStatus = await this.getFavAndLikeStatus(data._id)
			this.isFav = favAndLikeStatus.fav
			this.isLike = favAndLikeStatus.like

		},

		async onShow() {


		},

		onReady() {

		},

		methods: {
			//返回按钮事件
			clickBack() {
				uni.navigateBack()
			},

			//编辑按钮事件
			clickEdit() {
				uni.navigateTo({
					url: './edit?Action=edit'
				})
			},

			// 返回收藏和点赞状态
			async getFavAndLikeStatus(sampleID) {
				let resdata = {}
				await SampleFavorite.getFavAndLikeStatus(sampleID)
					.then((res) => {
						resdata = res
					})
				return resdata
			},

			//收藏或解除案列
			favSample() {
				this.isFav = !this.isFav //取反值
				SampleFavorite.setFavoriteStatus(this.detail._id).then(res => {
					if (res === this.isFav) {
						return
					} else if (res !== this.isFav) {
						this.isFav = !this.isFav
					}
				}).catch(err => {
					uni.showModal({
						content: err.message || '请求服务失败',
						showCancel: false
					})
				})
			},

			//点赞案列
			likeSample() {
				this.isLike = !this.isLike
				SampleFavorite.setLikeStatus(this.detail._id).then(res => {
					if (res === this.isLike) {
						return
					} else if (res !== this.isLike) {
						this.isLike = !this.isLike
					}
					// console.log(res)
				}).catch(err => {
					uni.showModal({
						content: err.message || '请求服务失败',
						showCancel: false
					})
				})
			},

			//收藏按钮事件
			favOnClick() {
				debounce(this.favSample, this, 2000)
				// this.isFav = !this.isFav
			},
			//点赞按钮事件
			likeOnClick() {
				debounce(this.likeSample, this, 2000)

			}

		},



	}
</script>

<style lang="scss">
	@import "../../uni.scss";

	.fault-box {
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
		background-color: #FFFFFF;
		margin-top: 8px;
		margin-left: 10px;
		margin-right: 10px;
		margin-bottom: 8px;

		border-radius: 10px;
	}

	.fault-box-head {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		padding-top: 8px;
		padding-bottom: 8px;
		padding-right: 10px;
	}

	.btn-favlike {
		padding-left: 10px;
	}

	.section {
		/* #ifndef APP-PLUS */
		background-color: transparent;
		/* #endif */
	}

	.test-align {
		margin-left: 20px;
		margin-right: 10px;
	}

	.botton-line {
		border-bottom-style: red;
	}

	.item-datatime {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		// align-items: flex-end;
		// align-content: flex-end;
		font-size: $uni-font-size-base;
		color: $uni-text-color-disable ;
		margin-top: 5px;
		margin-left: 20px;
		margin-right: 10px;
		margin-bottom: 8px;
	}
</style>